<template>
    <div class="home-item-container">
        <div class="home-item-container-row1">{{ info?.cinemaName }}</div>
        <div class="home-item-container-row2">{{ info?.cinemaAddress }}</div>
        <div>
            <nut-tag color="#5232B7" plain>极速出票</nut-tag>
        </div>
        <div class="cin-price" v-if="info?.price">
            <div class="title">影院最低价:</div>
            <nut-price :price="info?.price / 100" size="small" :decimal-digits="2" />
        </div>
    </div>
</template>
<script setup>
import { toRefs, onMounted, computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useMovieStore } from "../../../../store/index";
const movieStore = useMovieStore()
const { cinemaLineList } = storeToRefs(movieStore)
const props = defineProps({
    info: Object
})
const { info } = toRefs(props)
const isTagShow = computed(() => {
    const idExists = cinemaLineList.value.some(item => item.id === info.value?.cinemaLineId)
    return idExists // true if the ID exists in the array, false otherwise
})
onMounted(() => {


})

</script>
<style lang="less">
.home-item-container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 20px;
    // align-items: center;

    .home-item-container-row1 {
        color: #15181d;
        font-size: 26px;

    }

    .home-item-container-row2 {
        color: #858a99;
        font-size: 22px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .cin-price {
        margin-top: 15px;
        display: flex;
        align-items: center;

        .title {
            color: #858a99;
            font-size: 22px;
            margin-right: 15px;
        }
    }
}
</style>